<template>
    <div class="RecomMVCom">
        <h1>
            <router-link :to="{name:'Video'}">
                推荐MV
                <i class="fa fa-chevron-right"></i>
            </router-link>
        </h1>
        <article>
            <div class="RecomMV" v-for="{picUrl,name,artistName,playCount,item} in mv" :key="item">
                <span>
                    <router-link :to="{name:'Video'}">
                        <img :src="picUrl">
                        <i class="black"></i>
                        <i class="fa fa-play-circle-o">{{playCount}}</i>
                    </router-link>
                </span>
                <p class="name">
                    <a>
                        {{name}}
                    </a>
                </p>
                <p class="author">
                    <a>
                        {{artistName}}
                    </a>
                </p>
            </div>
        </article>
    </div>
</template>

<script>
import {MV} from '@/library/api/api'
export default {
    name:'RecomMVCom',
    data() {
        return {
            mv:{}
        }
    },
    created() {
        MV({}).then(res=>{
            this.mv = res.result.map(item=>{
                return item
            })
        })
    }
}
</script>

<style lang="scss" scoped>
@import './RecomMVCom.scss'
</style>
